.actionsheet-box{
  position:fixed;
  left:0px;
  top:0px;
  width:100%;
  height: 100%;
  overflow:hidden;
  visibility: hidden;
  transition-duration: 0.3s;

  &:before{
    opacity: 0;
    content: "";
    background: rgba(0,0,0,0.4);
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s;
  }

  .actions-modal {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 11000;
    width: 100%;
    transform: translate3d(0, 100%, 0);
    transition:transform 300ms;
    padding:@actionsheet-font-padding;

    .actionsheet-font{
      border-radius:@actionsheet-border-radius;
      text-align:center;
      line-height:@actionsheet-line-height;
      background:#fff;

      &.cancle{
        margin-top:10px;
      }

      dt{
        font-size:@actionsheet-dt-font;
      }

      dd{
        .border-t;
        font-size:@actionsheet-dd-font;
        //background:#fff;
      }
    }
  }

  &.actionsheet-in {
    visibility: visible;

    &:before{
      opacity: 1;
    }

    .actions-modal {
      transform: translate3d(0, 0, 0);
    }
  }
}